<template>
	<view :class="{'page-head':true,'transparent':!!transparent}">
		<view :class="{'status-bar':true,fixed:fixed}" :style="{paddingTop:statusBarHeight+'px',background:bg}">
			<view :class="{'uni-page-head':true,mask:transparent===true}">
				<slot name="left">
					<view class="uni-page-head-btn" @click="onBack">
						<i class="uni-btn-icon"></i>
					</view>
				</slot>
				<view class="uni-page-head__title">
					<slot name="title" />
				</view>
				<view class="uni-page-head-right">
					<slot name="right">
						<img class="search-png" :src="searchPng" @click="goSearch" />
					</slot>
				</view>
			</view>
			<slot name="bottom" />
		</view>
	</view>
</template>

<script>
	import searchPng from '../static/img/sousuo-da.png'

	export default {
		name: "page-head",
		props: {
			//透明背景
			transparent: {
				default: false
			},
			//固定在顶部
			fixed: {
				default: true
			}
		},
		data() {
			return {
				statusBarHeight: window.statusBarHeight,
				searchPng
			}
		},
		onShow() {
			this.init();
		},
		computed: {
			iconColor() {
				return !!this.transparent ? '#fff' : '#000'
			},
			bg() {
				if (this.transparent === true) {
					return
				} else if (this.transparent) {
					if (this.transparent[0] === '/' || this.transparent.substr(0, 4) === 'data') {
						return `url(${this.transparent}) top center/100%  no-repeat `
					} else {
						return this.transparent
					}
				} else {
					return 'white'
				}
			}
		},
		methods: {
			onBack() {
				this.$emit('onBack');
				h5NavigateBack()
			},
			goSearch() {
				h5NavigateTo({
					url: '../search/search'
				})
			},
			init() {
				if (this.fixed && this.transparent !== true) {
					headHeightSet()
					// window.statusBarHeight = 20
					callNative('getStatusBarHeight', '', function(response) {
						window.statusBarHeight = response;
						console.log('getStatusBarHeight==' + response);
						// mountApp()
					});
				}
				let flag = false;
				window.onscroll = () => {
					if (flag) return;
					flag = true;
					setTimeout(() => {
						flag = false;
						if (this.fixed && this.transparent === true) {
							const scrollTop = Math.max(document.scrollingElement.scrollTop, document.body.scrollTop);
							if (scrollTop > window.statusBarHeight) {
								document.querySelector('.page-head').classList.remove("transparent");
							} else {
								document.querySelector('.page-head').classList.add("transparent");
								document.querySelector('.page-head').style.height = 0;
							}
						}
					}, 200);
				}
			}
		},
		created() {
			/* 	// if (this.fixed && this.transparent !== true) {
				headHeightSet()
				// window.statusBarHeight = 20
				callNative('getStatusBarHeight', '', function(response) {
					window.statusBarHeight = response;
					console.log('getStatusBarHeight==' + response);
					// mountApp()
				});
				// }
				let flag = false;
				window.onscroll = () => {
					if (flag) return;
					flag = true;
					setTimeout(() => {
						flag = false;
						if (this.fixed && this.transparent === true) {
							const scrollTop = Math.max(document.scrollingElement.scrollTop, document.body.scrollTop);
							if (scrollTop > window.statusBarHeight) {
								document.querySelector('.page-head').classList.remove("transparent");
							} else {
								document.querySelector('.page-head').classList.add("transparent");
								document.querySelector('.page-head').style.height = 0;
							}
						}
					}, 200);
				} */
		},
		mounted() {
			this.init();
		},
		destroyed() {
			window.onscroll = null
		}
	}
</script>

<style lang="scss">
	.page-head {
		&.transparent {
			.status-bar {
				color: #fff;
				background-color: transparent;

				.uni-page-head.mask {
					background-color: rgba(0, 0, 0, 0.3);
				}
			}
		}

		.status-bar {
			background-color: #fff;
			transition: background-color ease 1s;

			&.fixed {
				position: fixed;
				background-size: 100%;
			}

			z-index: 1000;
			width: 100%;
		}

		.uni-page-head {
			display: flex;
			flex-wrap: wrap;
			padding: 20px 32px;
			height: 40px;

			.uni-page-head-btn {
				display: flex;
				flex-wrap: wrap;
				width: 40px;
				height: 40px;
				margin: 0;

				.uni-btn-icon {
					font-size: 40px;
					font-weight: bolder;
				}
			}

			.uni-page-head__title {
				flex: 1;
				width: 0;
				flex-basis: 0;
				max-width: 100%;
				padding: 0 !important;
				position: relative;
				text-align: center;
				font-size: 32px;
				height: 40px;
				line-height: 40px;
				display: flex;
				justify-content: center;
				align-items: center;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.uni-page-head-right {
				display: flex;
				flex-wrap: wrap;
				position: relative;
				/* width: 40px;
                height: 40px; */

				.search-png {
					width: 40px;
					height: 40px;
				}
			}
		}
	}
</style>
